<template>
  <cu-layout :navProp="{ placeholder: true, title: reservedMessage.stateName, textColor: 'black' }" :bgStyle="{}">
    <view :class="[`${prefixCls}-success-container`]">
      <view class="reserved">
        <image class="reserved-icon" :src="$CDN('/customer/static/images/share/avatar-icon.png')" alt="" />
      </view>
      <view class="message">
        <span class="text">{{ reservedMessage.stateName }}</span>
        <span class="text">{{ reservedMessage.tips }}</span>
      </view>
      <view class="reserved-btn">
        <uv-button type="primary" size="large" @click="handlejump">我的预定</uv-button>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'success',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      reservedMessage: {
        stateName: '预定成功',
        tips: '要记得按时签约呦',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    handlejump() {
      this.$ROUTE.go('/pages/subpackage/reserved/my-reservation')
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white;
}
.#{prefixCls('success-container')} {
  position: relative;
  background: #f2f8f8;
  box-sizing: border-box;
  overflow: hidden;
  .reserved {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    .reserved-icon {
      width: 88px;
      height: 88px;
    }
  }
  .message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .text {
      width: 100%;
      text-align: center;
      margin-top: 10px;
    }
  }
  .reserved-btn {
    margin-top: 50px;
    padding: 10px 30px;
  }
}
</style>
